<?php
// pr($charts);
        // echo $this->Html->script('jquery-ui-1.10.3.custom.min');
        // echo $this->Html->script('jquery.ui.touch-punch.min');

?>

		<div id="portlet-template" class="hidden">
		        <div class="title"></div>
		        <div class="content">
					<div class="chart"  ></div>
		        </div>
		</div>
		<div class="container">
			<div class="row"  >
				<div id="container0" class="portlet-container col-md-4" style="height: 100px;" >
				</div>
				<div id="container1" class="portlet-container col-md-4" style="height: 100px;" >
				</div>
				<div id="container2" class="portlet-container col-md-4" style="height: 100px;" >
				</div>
			</div>
		</div>

<script>




	$(document).ready(function(){
		
		loadCss("<?php echo Router::url( '/',true); ?>Wchart/css/jquery.jqplot.css");
		loadScript("<?php echo Router::url( '/',true); ?>js/jquery-ui-1.10.3.custom.min.js", function(){
	  	   // loadScript("<?php echo Router::url( '/',true); ?>js/jquery.ui.touch-punch.min.js", function(){
						// // inserire il codice 
						// // drawChart('jqplot','TEST');
						// // drawChart('torta-jobber-mestiere','TORTA_JOBBER_MESTIERE');
						// // drawChart('torta-jobber-regione','TORTA_JOBBER_REGIONE');
						// // drawChart('torta-jobber-user','TORTA_JOBBER_USER');
				loadScript("<?php echo Router::url( '/',true); ?>Wchart/js/jqplot/jquery.jqplot.min.js", function(){
				   loadScript("<?php echo Router::url( '/',true); ?>Wchart/js/jqplot/plugins/jqplot.pieRenderer.min.js", function(){
	 			     loadScript("<?php echo Router::url( '/',true); ?>Wchart/js/wchart.js", function(){
				
					    $("#container0,#container1,#container2").sortable({
					            handle: ".title",
					            placeholder: "placeholder",
					            connectWith: ".portlet-container"
					    });
					    $("#container0,#container1,#container2").disableSelection();
					    refreshCharts();
						setFlash("Caricamento grafici eseguito");
				
					});
								
				});
			});
						
   		   // });
		});
		

	});

    function refreshCharts() {
    	var url = '<?php echo $this->webroot;?>wchart/wchart/refresh';
        $.getJSON( url, function( data ) {
           if(!data.success){
          		setFlash(data.message,data.message_level);
           } else {
       			// rimuovo tutti i portlet
	   			$('.portlet').remove();
                // console.time("check");
           		if (data.charts.length>0) {
           			for (var i=0; i<data.charts.length; i++) {
           				writePortlet(data.charts[i],'container'+(i%3)); //+(i%3)
					    drawChart(data.charts[i]['Chart']['code'],data.charts[i]['Chart']['code'],'');
           			}
           		} else {
					setFlash("Nessun chart configurato.");
           		}
	            $('#loading').hide();
           }
         });
    }


	function writePortlet(chart, container) {
		portletElement = $('#portlet-template').clone();
		portletElement.removeAttr('id');
		portletElement.addClass('portlet');
		// portletElement.children('div.thumb').css('background','url('+webroot+chart.Notifica.thumb+')');
		// divTitleElement = portletElement.find('div');
		portletElement.children('div.title').html(chart.Chart.descr);
		divContent = portletElement.children('div.content');
		divContent.children('div.chart').attr('id',chart.Chart.code);
		portletElement.removeClass('hidden');
		portletElement.appendTo($('#'+container));
	}
    



</script>